<template>
  <view class="edit-group">
    <view class="edit-group-title">
      <text class="title-tips" />
      团队名称修改次数剩余<text>{{ residue_edit_num }}</text>
      次，请谨慎设置。
    </view>
    <view class="input-wrap">
      <input
        v-model="groupName"
        :maxlength="10"
        placeholderClass="edit-group-input__placeholder"
        class="edit-group-input"
        type="text"
        placeholder="请输入团队名称"
        @input="handleGetNameInpValue"
        @focus="handleInpOperate('FOCUS')"
        @blur="handleInpOperate('BLUR')"
      />
      <image
        v-if="isShowClearBtn"
        :lazy-load="true"
        class="input-wrap-icon"
        src="@/assets/icon/clear-btn.png"
        @tap="handleClearName"
      />
    </view>
    <view class="edit-group-rename">
      {{ rename }}
    </view>
    <view class="edit-group-desc">
      *限10个字符，可由中英文、数字组成
    </view>
    <view class="edit-group-desc">
      *请文明用语哦，一旦发现不文明用语命名将无效
    </view>
  </view>
</template>
<script>
import { NAME_REG } from "@/config/base-common";
import { debounce } from "@/libs/util";
export default {
  props: {
    value: {
      type: String,
      default: ""
    },
    /**重名文案 */
    rename: {
      type: String,
      default: ""
    },
    residue_edit_num: {
      type: Number,
      default: 0
    },
    groupInfo: {
      type: Object
    },
    /**弹窗状态 监听此值每次拿到最新的name */
    editModalStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      groupName: "",
      isNameFocused: false
    };
  },
  computed: {
    /**是否显示清除按钮 */
    isShowClearBtn() {
      return this.isNameFocused && this.groupName;
    }
  },
  watch: {
    editModalStatus: {
      handler: function(c) {
        if (c) {
          this.groupName = this.groupInfo.group_name;
        }
      },
      immediate: true
    }
  },
  methods: {
    /**姓名输入的特殊处理 */
    handleGetNameInpValue: debounce(function({ detail: { value } }) {
      if (value.match(NAME_REG)?.length) {
        this.$emit("showToast", "仅支持10个字符以内的中英文、数字");
      }
      /**只能输入中英文、数字 */
      this.groupName = value.replace(NAME_REG, "");
      this.$emit("change", this.groupName);
    }),
    /**清空输入框 */
    handleClearName() {
      console.log("clear");
      this.groupName = "";
    },
    handleInpOperate(type) {
      if (type === "FOCUS") return (this.isNameFocused = true);
      if (!this.groupName) this.isNameFocused = false;
    }
  }
};
</script>

<style lang="scss">
@import "../scss/group-common.scss";
.edit-group {
  &-title {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin-bottom: 48px;
    line-height: 40px;
    @include base-text(40px, 28px, #303133, 400);
    text {
      @include base-text(40px, 28px, #ff8000, 400);
    }
    .title-tips {
      background-image: url("../../../../assets/icon/tips.png");
      background-size: 100% 100%;
      height: 28px;
      width: 28px;
      margin-right: 8px;
    }
  }
  &-input {
    text-align: left;
    height: 88px;
    background: #fafafa;
    border-radius: 60px;
    margin-bottom: 10px;
    padding-left: 32px;
    &__placeholder {
      @include base-text(44px, 32px, #c0c4cc, 400);
    }
  }
  &-rename {
    text-align: left;
    padding-left: 32px;
    margin-bottom: 4px;
    @include base-text(34px, 24px, #ff8000, 400);
  }
  &-desc {
    padding-left: 32px;
    text-align: left;
    margin-bottom: 8px;
    @include base-text(34px, 24px, #909399, 400);
  }
  .input-wrap {
    position: relative;
    &-icon {
      position: absolute;
      width: 36px;
      height: 36px;
      top: 50%;
      transform: translateY(-50%);
      right: 32px;
      z-index: 9999;
    }
  }
}
</style>
